<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/jquery/jquery.effects.core.js"></script>
<title>Insert title here</title>
<style type="text/css">
<style>
			*{
				margin:0px;
				padding:0px}
			body{
				font-size:14px;
				background:#333;
				color:#fff;}
			.content > h1{
				font-family: Constantia, serif;
				font-size:40px;
				font-weight:normal;
				text-shadow:0px 0px 1px #ccc;
				padding:20px 40px;
				border-bottom:1px dotted #555;}
			.menu{
				background:#111;
				width:100%;
				overflow:hidden;
				margin-top: 20px;}
			.menu ul{
				display:block;
				list-style:none;
				width:1300px;
				height:300px;
				margin-left:20px;}
			.menu ul li{
				width:75px;
				height:300px;
				float:left;
				position:relative;
				border-right:2px solid #111;
				overflow:hidden;}
			.black{
				width:75px;
				height:300px;
				position:absolute;
				top:0px;
				left:0px;
				background:transparent url(resources/img/cbnu1.jpg) no-repeat top left;}
			.color{
				width:75px;
				height:300px;
				position:absolute;
				left:75px;
				top:0px;
				background:transparent url(resources/img/cbnu2.jpg) no-repeat top left;
				opacity:0.2;}
			.menu1 span{
				background-position:0px 0px;}
			.menu2 span{
				background-position:-75px 0px;}
			.menu3 span{
				background-position:-152px 0px;}
			.menu4 span{
				background-position:-227px 0px;}
			.menu5 span{
				background-position:-302px 0px;}
			.menu6 span{
				background-position:-377px 0px;}
			.info{	
				position:absolute;
				left:75px;
				top:0px;
				width:250px;
				height:260px;
				padding:20px;
				background:#F3F8F5}
			.info h2{
				font-family: arial, serif;
				font-size:26px;
				color:#333;
				padding:10px;
				text-shadow:0px 0px 1px #fff;}
			.info h3{
				font-family: arial, serif;	
				font-style:normal;
				background:#333;
				color:#fff;
				text-shadow:0px 0px 1px #000;
				padding:10px;
				margin:10px 0 20px 0;}
			.info p{
				color:#000;
				padding:10px 5px 0px 5px;
				font-size:11px;
				font-family:"돋움", Arial, Dotum, Sans-serif;
				line-height:18px;}
		</style>
	
</style>
</head>
<body>

		<div class="all">
			<div class="content">
				<h1>Expanding Image Menu</h1>
				<div id="menu" class="menu">
					<ul>
						<li>
							<a href="#" class="menu1">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU1</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
						<li>
							<a href="#" class="menu2">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU2</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
						<li>
							<a href="#" class="menu3">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU3</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
						<li>
							<a href="#" class="menu4">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU4</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
						<li>
							<a href="#" class="menu5">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU5</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
						<li>
							<a href="#" class="menu6">
								<span class="black"></span>
								<span class="color"></span>
							</a>
							<div class="info">
								<h2>CBNU6</h2>
								<h3>jquery & jquery</h3>
								<p>
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								충북대학교는 IT전문가들을 위한 교육 시스템을 기반으로하는 교육 대학의 대표 브랜드입니다
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

<script type="text/javascript">
$(function(){

	var $menu							= $('#menu > ul'),
		$menuItems					= $menu.children('li'),
		$menuItemsImgWrapper		= $menuItems.children('a'),
		$menuItemsPreview			= $menuItemsImgWrapper.children('.black'),
		totalMenuItems					= $menuItems.length

		ExpandingMenu 	= (function(){
			var current	= -1,
			anim	= true,
			validCurrent = function() {
				return (current >= 0 && current < totalMenuItems);
			},
			init = function() {
				if(validCurrent())
					configureMenu();
				initEventsHandler();
			},
			configureMenu = function() {
				var $item = $menuItems.eq(current);
				if(anim)
					slideOutItem($item, true, 900, 'easeInQuint');
			},
			initEventsHandler	= function() {
				$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
					var $this = $(this).parent(),
					idx = $this.index();

					if(current === idx) {
						slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
						current = -1;
					}
					else{
						if(validCurrent() && current !== idx)
							slideOutItem($menuItems.eq(current), false, 250, 'jswing');
						current	= idx;
							slideOutItem($this, true, 250, 'jswing');
					}
				});
			},
			openItem = function(idx) {
				$menuItemsImgWrapper.eq(idx).click();
			},
			slideOutItem = function($item, dir, speed, easing, mLeave) {
				var $color	= $item.find('.color'),

				itemWidth	= (dir) ? {width : '365px'} : {width : '75px'},
				imageColor	= (dir) ? {left : '0px'} : {left : '75px'};


				$item.stop().animate(itemWidth, speed, easing);
				$color.stop().animate(imageColor, speed, easing, function() {
					if(dir)
						$color.animate({opacity:1}, 2000);
					else
						$color.css('opacity', 0.2);
				});


				if(dir)
					$menuItemsPreview.stop().animate({opacity:0.1}, 1000);
				else if(mLeave)
					$menuItemsPreview.stop().animate({opacity:1}, 1500);
			};
			return {
				init : init,
				openItem : openItem
			};
		})();
	ExpandingMenu.init();

});
</script>
</body>
</html>